/**
 * 功能描述: 基础单选框组件样式
 * @author 赵常畅
 * @date 2022/9/21 14:06
 * @version 1.0
 */

@import "../../style/index";
@import "./radioConstant";

// 基础radio 最外层容器
@mixin radio-wrapper--layout{
  // 布局
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  margin-right: 8px;
  // 伪类样式
  &::after {
    display: inline-block;
    width: 0;
  }
}
@include b(radio-wrapper) {
  // 样式
  color: $--radio-wrapper-font-color;
  font-size: $--radio-wrapper-font-size;
  font-variant: tabular-nums;
  line-height: $--radio-wrapper-line-height;
  list-style: none;
  font-feature-settings: 'tnum';
  cursor: pointer;
  // 伪类样式
  &::after {
    overflow: hidden;
    content: '\a0';
  }
  // 引入布局
  @include radio-wrapper--layout;
}

// 基础radio
@mixin radio--layout {
  //布局
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: $--radio-line-height;
  position: relative;
  top: 0.2em;
  display: inline-block;
}
@include b(radio) {
  // 样式
  color: $--radio-font-color;
  font-size: $--radio-font-size;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  outline: none;
  cursor: pointer;
  // 引入布局
  @include radio--layout;
}

// 基础radio 鼠标悬浮、获得焦点
.#{$namespace}-radio:hover .#{$namespace}-radio-inner,
.#{$namespace}-radio-input:focus + .#{$namespace}-radio-inner {
  border-color: $--radio-hover-border-color;
}

// 基础radio内 基础单选框
@mixin radio-input--layout {
  // 布局
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
@include b(radio-input) {
  // 样式
  z-index: 1;
  opacity: 0;
  // 获得焦点
  &:focus {
    & + .#{$namespace}-radio-inner {
      box-shadow: $--radio-input-focus-box-shadow;
    }
  }
  // 引入布局
  @include radio-input--layout
}

// 基础radio 选中
@mixin radio-wrapper-checked--layout {
  // 布局
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
@include b(radio-wrapper-checked) {
  // 样式
  &::after {
    border: $--radio-checked-after-border;
    border-radius: $--radio-checked-after-border-radius;
    visibility: hidden;
    -webkit-animation: $--radio-checked-after-animation;
    animation: $--radio-checked-after-animation;
    -webkit-animation-fill-mode: $--radio-checked-after-animation-fill-mode;
    animation-fill-mode: $--radio-checked-after-animation-fill-mode;
    content: '';
  }
  // 单选框 内容
  @include b(radio-inner) {
    border-color: #1890ff;
    // 伪类样式
    &::after {
      transform: $--radio-checked-inner-transform;
      opacity: 1;
      transition: $--radio-checked-inner-transition;
    }
  }
  // 引入布局
  @include radio-wrapper-checked--layout;
}

// 基础radio 内部
@mixin radio-inner--layout {
  // 布局
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 16px;
  // 伪类样式
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
  }
}
@include b(radio-inner) {
  // 样式
  background-color: $--radio-inner-background-color;
  border: $--radio-inner-border;
  border-radius: $--radio-inner-border-radius;
  transition: $--radio-inner-transition;
  // 内部选中实心圆
  &::after {
    background-color: $--radio-inner-after-background-color;
    border-top: 0;
    border-left: 0;
    border-radius: $--radio-inner-after-border-radius;
    transform: scale(0);
    opacity: 0;
    transition: $--radio-inner-transition;
    content: ' ';
  }
  // 引入布局
  @include radio-inner--layout;
}

// 基础radio 禁用
@include b(radio-wrapper-disabled) {
  // 样式
  cursor: not-allowed;
  // 单选框内容
  .#{$namespace}-radio-inner {
    background-color: $--radio-disabled-inner-background-color;
    border-color: $--radio-disabled-inner-border-color !important;
    cursor: not-allowed;
    // 内部实心圆
    &::after {
      background-color: $--radio-disabled-inner-after-background-color;
    }
  }
  // 原生input框
  @include b(radio-input) {
    cursor: not-allowed;
    // 获得焦点 相邻 radio内部容器
    &:focus {
      & + .#{$namespace}-radio-inner {
        box-shadow: none;
      }
    }
  }
  // 相邻span
  span {
    color: $--radio-disabled-span-font-color;
    cursor: not-allowed;
  }
}

// 带单选的span 相邻的 所有元素
span {
  &.#{$namespace}-radio {
    & + * {
      padding-right: 8px;
      padding-left: 8px;
    }
  }
}

// radio 鼠标悬浮 获得焦点
.#{$namespace}-radio-wrapper:hover .#{$namespace}-radio,
.#{$namespace}-radio:hover .#{$namespace}-radio-inner,
.#{$namespace}-radio-input:focus + .#{$namespace}-radio-inner {
  border-color: #1890ff;
}

// 鼠标悬浮
.#{$namespace}-radio:hover::after,
.#{$namespace}-radio-wrapper:hover .#{$namespace}-radio::after {
  visibility: visible;
}

// 动画
@mixin radioEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
// 兼容火狐浏览器
@-webkit-keyframes #{$namespace}RadioEffect {
  @include radioEffect
}
// 基本语法的动画
@keyframes #{$namespace}RadioEffect {
  @include radioEffect
}
